<template>
	<view class="w-full h-full flex-column">
		<NavBar title="账单详情" />
		<view class="flex-1 detail-box">
			<view class="top flex-column flex-center align-center">
				<image src="/static/parking/wechart.png"></image>
				<view class="money mt-20">-{{detail.unpayFee.toFixed(2)}}</view>
			</view>
			<view class="bottom mt-50">
				<view class="flex-between item" v-for="item in list" :key="item.label">
					<text class="label">{{item.label}}</text>
					<text v-if="item.key === 'w'">
						***********有限公司
					</text>
					<text v-else class="value">{{ item.key === '' ? '微信支付': detail[item.key] || '-'}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { myTemporaryOrderInfoByOrderNo } from '@/apis/base.js'
	export default {
		data () {
			return{
				list: [
					{
						label: '车牌号',
						key: 'plate'
					},
					{
						label: '停车场',
						key: 'parkName'
					},
					{
						label: '付款方式',
						key: ''
					},
					{
						label: '收费主体',
						key: 'w'
					},
					{
						label: '订单号',
						key: 'orderNo'
					},
					{
						label: '交易时间',
						key: 'createTime'
					},
					{
						label: '流水号',
						key: 'transactionId'
					},
					{
						label: '进场时间',
						key: 'enterTime'
					},
					{
						label: '出场时间',
						key: 'exitTime'
					},
				],
				detail: {}
			}
		},
		onLoad(option) {
			this.getDetail(option.orderNo)
		},
		methods: {
			getDetail (orderNo = '') {
				myTemporaryOrderInfoByOrderNo({orderNo: orderNo}).then(res => {
					this.detail = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-box{
		padding: 30rpx;
		.top{
			height: 360rpx;
			border-bottom: 1px solid #DCE4EF;
			image{
				width: 100rpx;
				height: 100rpx;
			}
			.money{
				font-family: PingFang SC;
				font-size: 60rpx;
				font-weight: 600;
				line-height: 84rpx;
				color: #222222;
				text-indent: -.3em;
			}
		}
		.bottom{
			.item{
				height: 70rpx;
				.label{
					font-family: PingFang SC;
					font-size: 26rpx;
					font-weight: 400;
					color: #919EB5;
				}
				.value{
					font-family: PingFang SC;
					font-size: 26rpx;
					font-weight: 400;
					color: #222222;
				}
			}
		}
	}
</style>